<template>
<Modal
	v-model="show"
	title="组合信息"
	@on-ok="group_ok"
	>
	<div>
		<div class="left">
			<ul class="list_box">
				<li v-for="(val,index) in list" :class="{cur:index==sel}">
					<template v-if="list[index].is_edit">
						<Input type="text" v-model="list[index].name" >
							<Button slot="append" @click="list[index].is_edit = false">确认</Button>
						</Input>
					</template>
					<template v-else>
						
						<div class="item_box">
							<div class="item_act">
								<a @click="list[index].is_edit=true">编辑</a>
								<a @click="del(index)">删除</a>
							</div>
							<span @click="sel_item(index)">{{list[index].name}}</span>
						</div>
					</template>
				</li>
			</ul>
			<div class="act_box">
				<a @click="add">添加</a>
			</div>
		</div>
		<div class="right">
			<div class="right_box">
				<CheckboxGroup v-model="member_sels" v-if="sel>-1">
				<ul class="mem_list">
					<li v-for="val in members">
						<Checkbox :label="val.id" :disabled="is_disabled(val.id)">
							<Icon type="ios-contact"></Icon>
							<span>{{val.nickname}}({{val.mobile}})</span>
						</Checkbox>
					</li>
					
				</ul>
				</CheckboxGroup>
				<div v-else>
					请选择项目
				</div>
			</div>
		</div>
	</div>
</Modal>
</template>

<script>
export default {
    name: 'group_member',
    data () {
		let self = this;
        return {
            show:false,
			list:[],
			sel:-1,
			members:[],
			count:0,
			page:1,
			size:10,
			member_sels:[]
        };
    },
	props:['value','data'],
	created(){
		
		
	},
    watch: {
		value(val){
			this.show = val;
			
		},
		show(val){
			if(val){
				this.member_sels = [];
				this.list = [];
				if(this.data){
					this.list = this.data;
				}
				
				this.load_member();
			}
			this.$emit('input',val);
		},
		member_sels(val){
			if(this.sel<0){
				return;
			}
			this.list[this.sel]['data'] = val;
		},
    },
	methods:{
		group_ok(){
			var arr = [];
			for(var i=0;i<this.list.length;i++){
				arr.push({
					name:this.list[i].name,
					data:this.list[i].data
				});
			}
			this.$emit('change',arr);
		},
		add(){
			var data = {
				name:'',
				is_edit:true,
				data:[]
			};
			this.list.push(data);
		},
		del(index){
			this.list.splice(index,1);
			this.sel = -1;
		},
		sel_item(index){
			this.sel = index;
			this.member_sels = this.list[index].data;
		},
		load_member(){
			var self = this;
			var postdata = {
				page:self.page,
				size:self.size,
			};
			Whttp.load('User/User/get_list',postdata,function(result){
				self.members = result.list;
				self.count = parseInt(result.count);
			});
		},
		is_disabled(id){
			if(!this.data){
				return false;
			}

			return this.data.in_array(id);
		}
	}
};
</script>
<style scoped>
	@import './group_member.css';
</style>